<template>
    <div>
        <a href="" @click.prevent="touserPage()">
        <div class="img">
        <img :src="src" alt="">
        </div></a>
        <h4>{{ user.user_name }}</h4>
    </div>
</template>

<style scoped>
    h4{
        margin: 0.8rem 0 0;
    }
    div{
        padding: 1.5rem;
        margin:-1rem;
        display: flex;
        flex-direction:column;
        align-items: center;
       
    }
    .img{
        width: 18.85rem;
        height: 18.85rem;
        padding: 1.43rem;
        margin: -1.43rem;
    }
    img{
        width: 16rem;
        height: 16rem;
        border-radius:50%;
    }
    p{
        font-size: 8px;
        opacity:0.7;
    }
</style>

<script>
import { url } from '@/apiUrl';
export default {
    props:{
        user:{}
    },
    data(){
        return {
            src:`${url}/${this.user.avatar_url}`
        }
    },

    methods:{
      touserPage(){
        console.log(1);
        this.$router.push("userpage")
      }
    }
}
</script>